<template>
  <div>
    <div class="home-hot" data-v-6a26e2cb="">
      <div class="home-panel" data-v-39dda62a="" data-v-6a26e2cb="">
        <div class="container" data-v-39dda62a="">
          <div class="head" data-v-39dda62a="">
            <h3 data-v-39dda62a="">
              人气推荐<small data-v-39dda62a="">人气爆款 不容错过</small>
            </h3>
          </div>
          <div data-v-6a26e2cb="" style="position: relative; height: 426px">
            <ul class="goods-list" data-v-6a26e2cb="">
              <li data-v-6a26e2cb="" v-for="item,index in arr" :key="index">
                <a
                  aria-current="page"
                  href="#"
                  class="router-link-active router-link-exact-active"
                  data-v-6a26e2cb=""
                  ><img
                    :src="item.picture"
                    alt=""
                    data-v-6a26e2cb=""
                  />
                  <p class="name" data-v-6a26e2cb="">{{item.title}}</p>
                  <p class="desc" data-v-6a26e2cb="">{{item.alt}}</p></a
                >
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      arr:[]
    }
  },
  mounted() {
    this.axios
      .get("https://apipc-xiaotuxian-front.itheima.net/home/hot")
      .then((res) => {
        this.arr = res.data.result;
      });
  },
};
</script>